<template>
  <view :style="{height: winHeight + 'px'}">
    <up-navbar title="购物车">
      <template #left>
        <text> </text>
      </template>
    </up-navbar>
    <view :style="{height: topHeight + 'px'}"></view>
    <up-row type="flex" :customStyle="{'flex-direction': 'column', height: `${winHeight - topHeight}px`}">
      <view style="flex: 1; height: 0; overflow: scroll; width: 100%;">
        <!-- <up-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
            :size="22"
            :iconSize="18"
        >
            <up-checkbox
              class="checkbox-item u-m-l-20 u-m-r-20"
              :customStyle="{marginBottom: '8px'}"
              v-for="(item, index) in goodsInfoList"
              :key="index"
              :name="item.id"
            >
              <template #label>
                <goods-item type="cart"></goods-item>
              </template>
            </up-checkbox>
        </up-checkbox-group> -->
        <view class="u-p-20" v-if="goodsInfoList">
          <view class="u-p-l-15 u-p-r-15 u-p-t-20 u-p-b-20 cart-item" v-for="(item, index) in goodsInfoList" :key="index">
            <goods-item
              type="cart"
              :data="item"
              size="168rpx"
              @changeNum="init"
            ></goods-item>
          </view>
        </view>

        <view style="margin-top: 30vh;" v-if="goodsInfoList && goodsInfoList.length == 0">
          <up-empty mode="car"></up-empty>
        </view>
      </view>

      <view style="width: 100%;">
        <up-row
          type="flex"
          justify="space-between"
          customStyle="width: 100%"
        >
          <up-row customStyle="flex: 1; height: 43px;" class="u-border-top">
            <!-- <up-tag
              type="warning"
              text="取消全选"
              icon="checkmark-circle-fill"
              v-if="checkboxValue1.length == goodsInfoList.length"
              @click="checkAll(false)"
            ></up-tag>
            <up-tag
              type="warning"
              text="全选"
              icon="checkmark-circle"
              v-else
              @click="checkAll(true)"
            ></up-tag> -->
            <u-row class="u-m-l-30" customStyle="position: relative;">
              <view class="pay-icon">
                <uni-icons customPrefix="iconfont" type="icon-moneybag" :color="$u.color.warning" size="22px"></uni-icons>
              </view>
              <view class="u-m-l-10">
                <text class="u-main-color txt-large" v-if="summary">¥{{ summary }}</text>
                <text class="u-main-color txt-large" v-else>¥--</text>
              </view>
            </u-row>
          </up-row>
          <view>
            <view class="check-over" @click="toOrder">结算</view>
          </view>
        </up-row>
        </view>
    </up-row>
  </view>
</template>

<script>
import goodsItem from '@/components/goods-item/goods-item.vue';
export default {
  components: {
    goodsItem
  },
  data() {
    return {
      checkboxValue1: [],
      goodsInfoList: null
    }
  },
  computed: {
    winHeight() {
      return uni.getSystemInfoSync().screenHeight - this.topHeight + 10
    },
    topHeight() {
      return uni.getSystemInfoSync().statusBarHeight + 44
    },
    summary() {
      if(!this.goodsInfoList) return 0
      let total = 0;
      this.goodsInfoList.forEach(item => {
        total += item.price * item.quantity;
      })
      if (!isNaN(total)) total = parseFloat(total.toFixed(2))
      return total;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let { data } = await this.$api.cart.get()
      this.goodsInfoList = data.items || [];
    },
    checkAll(status) {
      this.checkboxValue1 = status ? this.goodsInfoList.map(item => item.id) : [];
    },
    checkboxChange() {},
    toOrder() {
      uni.navigateTo({ url: '/pages/create-order/create-order' })
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.checkbox-item .u-checkbox__label-wrap) {
  flex: 1;
}
.footer {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999;
}
.cart-item {
  border: 1rpx solid #eeeeee;
  box-shadow: 0 5px 8px rgba(0 ,0, 0, 0.15);
  border-radius: 8px;
}
.check-over {
  background: #222222;
  color: #FFFFFF;
  width: 100px;
  height: 44px;
  line-height: 45px;
  text-align: center;
}
.pay-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50% 50% 0 50%;
  text-align: center;
  line-height: 80rpx;
  background: #222;
  position: relative;
  top: -20rpx;
}
</style>